<script setup>
import { ref } from 'vue';
import SonVue from './components/Son.vue';
// ref
// - 可以绑定数据, 也可以绑定dom/组件
// - 双ref搭配， tempalte ref + ref定义容器
// 父如何使用子组件示例的数据/方法？
// 1. 子组件定义
// 2. 子组件暴露
// 3. 父组件调用

//可以绑定dom
const h1Ref = ref(null)
const getH1 = () => {
  console.log(h1Ref.value)
}

//可以绑定组件
// 1. 定义ref容器
// 2. 绑定ref
const sonRef = ref(null)
const getSon = () => {
  console.log(sonRef.value)
}

//父组件调用
const sonHandle = () => sonRef.value.sayHello()
</script>
<template>
  <div style="border:10px solid #333">
    <h1 ref="h1Ref">当前组件</h1>
    <SonVue ref="sonRef" />

    <button @click="getH1">拿到h1</button>
    <button @click="getSon">拿到子组件</button>
    <button @click="sonHandle">调用子组件方法</button>
  </div>
</template>

